<template>
    <div class="dashboard-container">
      <!---添加搜索组件-->
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="关键字">
                <el-input style="width: 100" v-model="searchObj.username" placeholder="用户名"></el-input>
              </el-form-item>
            </el-col>
            <!--没完成-->
             <el-col :span="8">
              <el-form-item label="操作时间">
                <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" value-format="yyyy-MM-dd HH-mm-ss" style="margin-right: 10; width: 20" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row style="display: flex">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
            <el-button class="btn-add" size="mini" icon="el-icon-delete-solid" @click="batchRemove()">批量删除</el-button>
          </el-row>
          </el-form>
      </div>
  
      <!--表格-->
      <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%; margin-top: 10px"
        @selection-change="handleSelectionChange">
        >
        <!--复选框-->
        <el-table-column type="selection" />
  
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="ipaddr" label="ip地址" />
        <el-table-column prop="msg" label="提示信息" />
        <el-table-column prop="createTime" label="创建时间" width="160" />
  
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)"
              title="删除"></el-button>
           
          </template>
        </el-table-column>
      </el-table>

      <!---添加分页组件-->
      <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper" @current-change="fetchData" />
    </div>
  </template>
  <script>
  import api from "@/api/loginlog/LoginLog.js";
  
  export default {
    data() {
      return {
        list: [],
        tottal: 0,
        limit: 4,
        page: 1,
        searchObj: {},
        createTimes: [],
        //批量删除选中的数据
         selectValueData: [],
      };
    },
    created() {
      this.fetchData(1);
    },
    methods: {
        //批量删除
        batchRemove() {
            if (this.selectValueData.length == 0) {
                this.$confirm("请选择要删除的数据");
            }
            this.$confirm("此操作将永久的删除该用户,是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var ids = [];

                for (var i = 0; i < this.selectValueData.length; i++) {
                    var obj = this.selectValueData[i];
                    var id = obj.id;
                    ids.push(id);
                }
                api.deleteLoginLogIds(ids).then((response) => {
                    alert("ids:"+ids);
                    this.$message({
                        //提示是否删除成功
                        type: "success",
                        message: "删除成功",
                    });
                    //删除成功之后刷新一下表单
                    this.fetchData();
                });
            });
        },
        handleSelectionChange(selectValue){
            this.selectValueData=selectValue;
        },
      //删除
      removeDataById(id) {
        alert(id);
        this.$confirm("此操作将永久的删除该用户,是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          api.deleteById(id).then((response) => {
              this.$message({
                //提示是否删除成功
                type: "success",
                message: "删除成功",
              });
              //删除成功之后刷新一下表单
              this.fetchData();
            });
        });
      },
      //重置
      resetData() {
        //表单重置
        this.fetchData();
        //搜索重置
        this.searchObj = {};
        //时间重置
        this.createTimes = [];
      },
      //分页查询
      fetchData(pageNum = 1) {
        this.page = pageNum;
        api
          .getPageList(this.page, this.limit, this.searchObj)
          .then((Response) => {
            this.list = Response.data.records;
            this.total = Response.data.total;
          });
      },
    },
  };
  </script>

